<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>考古加代理管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'AgencyKgjAgentAgentList' }">代理列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ props.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="客户信息">
          <el-input v-model="state.params.key_word" clearable placeholder="请输入兑换码" />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select v-model="state.params.user_type" placeholder="不限">
            <el-option
              v-for="item in codeTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="会员到期时间" label-width="120px">
          <el-date-picker
            v-model="state.params._dateRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label="关联时间">
          <el-date-picker
            v-model="state.params._completeDateRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #remark="s">
          <div class="table-text">
            <span>{{ s.row.remark }}</span>
            <el-link type="primary" @click="onClickEditRemark(s.row)">编辑</el-link>
          </div>
        </template>
      </KTable>
    </div>
    <!-- 订单备注 -->
    <EditRemarkModal ref="editRemarkModal" @success="methods.onSearch" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useTableList, codeTypeOptions, timeChange } from './hooks/use-table';
import EditRemarkModal from './components/edit-remark-modal.vue';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjAgentExchangeUserList' });
const route = useRoute();
const props = route.query;
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: Record<string, any>) => {
    const cacheParams = {
      ...params,
      _dateRange: undefined,
      _completeDateRange: undefined
    };
    const { _dateRange, _completeDateRange } = params;
    return {
      ...cacheParams,
      complete_from_dt: timeChange(_completeDateRange).from,
      complete_to_dt: timeChange(_completeDateRange).to,
      from_dt: timeChange(_dateRange).from,
      to_dt: timeChange(_dateRange).to,
      colonel_id: props.colonelId
    };
  }
});

// 编辑
const editRemarkModal = ref();
const onClickEditRemark = (row: any) => {
  editRemarkModal.value.show(1, row);
};
</script>
<style lang="scss" scoped>
.table-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
}
</style>
